<!-- 维修店-维修师傅 -->
<template>
	<view class="shopNearOrderListShop">
		<view class="main">
			<view class="list" v-if="list.length">
				<view class="li" v-for="(item, index) of list" :key="index">
					<view class="listateTime">
						{{item.createTime}}
					</view>
					<view class="topRight">
						<view class="topRightBox1" v-if="item.orderState == 0">
							<text class="font_blod">未接单</text>
						</view>
						<view class="topRightBox" v-else>
							<text class="font_blod">已接单</text>
						</view>
					</view>
					<view class="liTop">
						<view class="imagebox">
							<image :src="item.userWximage" mode="" v-if="item.userWximage"></image>
							<image src="https://www.zzzsyh.com/applets/agent/user/head_.png" mode="" v-else></image>
							<!-- <view class="name">
								{{item.userName}}
							</view> -->
						</view>
						<view class="messbox">
							<view class="messboxbtn">
								<view class="messli">
									<text class="title">服务类型：</text>
									<text class="content font_blod">{{item.typeNameFirst}}</text>
								</view>
								<view class="bntn" @click="cli_details(item, index)">
									查看详情
								</view>
							</view>

							<view class="messli">
								<text class="title">电器品类：</text>
								<text class="content">{{item.typeNameSecond}} {{item.typeNameThird}}</text>
							</view>
							<!-- <view class="messli">
								<text class="title">下单时间：</text>
								<text class="content">{{item.createTime}}</text>
							</view> -->
						</view>
					</view>
					<view class="liAddress">
						<image src="https://www.zzzsyh.com/applets/agent/agent/address.png" mode=""></image>
						<view class="content">
							{{item.userAddress}}
						</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 开始 -->
			<uni-load-more :status="loadStatus" v-if="list.length"></uni-load-more>
			<!-- 加载更多 结束 -->
			<view class="empty" v-else>
				<image src="https://www.zzzsyh.com/applets/agent/user/image-empty.png" mode=""></image>
				<text>暂无订单~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				pageNum: 1,
				pageSize: 10,
				state: 1,
				list: [],
				orderState: '', // 预约单状态 0未接单 1已接单 2已完成 3已支付 4已评价  全部传空
				loadStatus: 'more', // more 加载前 loading 加载中 noMore 没有更多数据
				isMore: true, // 是否有更多
			}
		},
		computed: {

		},
		onPullDownRefresh() {
			this.pageInit()
		},
		// 触底
		onReachBottom() {
			console.log('触底')
			if (!this.isMore) {
				console.log('没有更多')
				this.loadStatus = 'noMore'
			} else {
				console.log('更多')
				this.loadStatus = 'loading'
				this.pageNum += 1
				this.getList()
			}
		},
		onShow() {
			this.pageInit()
		},
		methods: {
			// 初始化
			pageInit() {
				this.pageNum = 1
				this.list = []
				this.isMore = true
				this.getList()
			},
			// 点击查看详情
			cli_details(item, index) {
				uni.navigateTo({
					url: '/pages/centerRepairBillDetails/centerRepairBillDetails?id=' + item.id
				})
			},
			// 获取订单列表
			getList() {
				uni.request({
					url: allapi.getStoreServiceOrderListByagentId,
					data: {
						agentId: this.agentId,
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					},
					success: (res) => {
						console.log('列表', res);
						let dat = res.data.data
						uni.stopPullDownRefresh()
						if (dat && dat.length) {
							this.list = this.list.concat(dat)
							if (dat.length < 10) {
								this.isMore = false
								this.loadStatus = 'noMore'
							}
						} else {
							this.isMore = false
							this.loadStatus = 'noMore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shopNearOrderListShop {
		// padding-top: 0.1rpx;

		.headNav {
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-top: 36rpx;
			position: fixed;
			width: 100%;
			height: 104rpx;
			z-index: 66;
			background: #F3F5F7;

			.li {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.text {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #666666;
			}

			.textOk {
				color: #333333;
			}

			.image {
				width: 51rpx;
				height: 8rpx;
				margin-top: 16rpx;
				// background: #FFFFFF;
				border-radius: 6rpx;
			}

			.imageOk {
				background: #28CD50;
			}
		}

		.main {

			.list {
				padding: 0 24rpx;

				.li {
					margin: 24rpx 0;
					padding: 24rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					position: relative;

					.listateTime {
						display: flex;
						justify-content: space-between;
						// align-items: center;
						height: 64rpx;
						font-size: 28rpx;
						color: #999999;
						font-weight: 400;
						line-height: 40rpx;
						border-bottom: 1rpx solid #EEEEEE;
						margin-bottom: 16rpx;
					}

					.topRight {
						position: absolute;
						right: 0;
						top: 0;
						width: 182rpx;
						height: 74rpx;
						overflow: hidden;
						background: #F3F5F7;
						font-size: 28rpx;

						.topRightBox {
							width: 182rpx;
							height: 74rpx;
							background: url('https://www.zzzsyh.com/applets/agent/user/user30.png');
							background-size: 100%;
							background-repeat: no-repeat;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							text {
								margin-right: 28rpx;
								color: #999999;
							}
						}

						.topRightBox1 {
							width: 182rpx;
							height: 74rpx;
							background: url('https://www.zzzsyh.com/applets/agent/user/user28.png');
							background-size: 100%;
							background-repeat: no-repeat;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							text {
								margin-right: 28rpx;
								color: #F48F5F;
							}
						}

						.topRightBox2 {
							width: 182rpx;
							height: 74rpx;
							background: url('https://www.zzzsyh.com/applets/agent/user/user30.png');
							background-size: 100%;
							background-repeat: no-repeat;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							text {
								margin-right: 28rpx;
								color: #57C576;
							}
						}

						.topRightBox3 {
							width: 182rpx;
							height: 74rpx;
							background: url('https://www.zzzsyh.com/applets/agent/user/user31.png');
							background-size: 100%;
							background-repeat: no-repeat;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							text {
								margin-right: 28rpx;
								color: #666666;
							}
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.liTop {
						display: flex;

						.imagebox {
							width: 84rpx;

							image {
								width: 84rpx;
								height: 84rpx;
								background: #EEEEEE;
								border-radius: 50%;
							}

							.name {
								font-size: 20rpx;
								color: #666666;
								line-height: 28rpx;
								margin-top: 16rpx;

							}
						}

						.messbox {
							margin-left: 24rpx;
							flex: 1;
							.messboxbtn {
								display: flex;
								justify-content: space-between;
								align-items: center;
							}
							.messli {
								line-height: 34rpx;
								margin-bottom: 16rpx;

								.title {

									font-size: 24rpx;
									color: #666666;
									font-weight: 400;

								}

								.content {
									font-size: 28rpx;
									color: #333333;
								}
							}

							.bntn {
								width: 132rpx;
								height: 54rpx;
								line-height: 54rpx;
								text-align: center;
								background: #EFFBE4;
								border-radius: 27rpx;
								border: 2rpx solid #28CD50;
								font-size: 20rpx;
								color: #28CD50;
								font-weight: 400;
								line-height: 54rpx;
							}
						}


					}

					.liAddress {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 34rpx;
						background: #F3F5F6;
						border-radius: 16rpx;
						padding: 24rpx;

						image {
							width: 34rpx;
							height: 34rpx;
						}

						.content {
							flex: 1;
							margin-left: 24rpx;
						}
					}

					.liBtm {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						margin-top: 16rpx;

						.liPay {
							.pay-text {
								font-size: 28rpx;
								color: #57C576;

								&.nopay {
									color: #F9AE46;
								}
							}
						}

						.rightBox {
							display: flex;
						}

						.box1 {
							width: 144rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							border-radius: 28rpx;
							border: 2rpx solid #666666;
							color: 666666;
						}

						.box2 {
							padding: 0 24rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							border-radius: 28rpx;
							border: 2rpx solid #28CD50;
							color: #28CD50;
							margin-left: 24rpx;
						}

						.box3 {
							padding: 0 24rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							border-radius: 28rpx;
							border: 2rpx solid #F8A025;
							color: #F8A025;
							margin-left: 24rpx;
						}
					}
				}

			}

			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 30%;

				image {
					width: 366rpx;
					height: 326rpx;
					margin-bottom: 72rpx;
				}

				text {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
